<template>
  <view class="help-container">
    <!-- 内容区域 -->
    <scroll-view class="content-area" scroll-y>
      <!-- 基础功能卡片 -->
      <view class="help-card">
        <view class="card-header">
          <uni-icons type="info" size="24" class="card-icon"/>
          <text class="card-title">基础功能</text>
        </view>
        <view class="help-items">
          <view class="help-item">
            <uni-icons type="checkmarkempty" size="20" class="item-icon"/>
            <text class="item-text">点击"计算"按钮进入主界面</text>
          </view>
          <view class="help-item">
            <uni-icons type="checkmarkempty" size="20" class="item-icon"/>
            <text class="item-text">输入原材料长度、数量点击添加，完成材料的输入</text>
          </view>
          <view class="help-item">
            <uni-icons type="checkmarkempty" size="20" class="item-icon"/>
            <text class="item-text">输入需求长度、数量点击添加，完成需求的输入</text>
          </view>
          <view class="help-item">
            <uni-icons type="checkmarkempty" size="20" class="item-icon"/>
            <text class="item-text">点击"开始优化"开始优化</text>
          </view>
        </view>
      </view>

      <!-- 常见问题卡片 -->
      <view class="help-card">
        <view class="card-header">
          <uni-icons type="help" size="24" class="card-icon"/>
          <text class="card-title">常见问题</text>
        </view>
        <view class="help-items">
          <view class="help-item">
            <uni-icons type="info" size="20" class="item-icon"/>
            <text class="item-text">一直转圈？材料、需求比较复杂，等待一会或点击右上角三个点重新进入</text>
          </view>
        </view>
      </view>

      <text class="feedback-title">以上内容是否解决了您的问题？</text>

      <view class="contact-service">
        <text class="contact-text">仍需帮助？</text>
        <text class="service-link">添加微信：QQQ666888TTT</text>
      </view>
      <view class="contact-service">
        <text class="contact-text">网址地址：</text>
        <text class="service-link">www.shengliaoxia.top</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  onShareTimeline() {
    return {
      title: '免费计算最优下料方案',
      path: '/pages/index/index',
      imageUrl: '/static/share.jpg',
      type: '0'
    };
  },
  onShareAppMessage() {
    return {
      title: '免费计算最优下料方案',
      path: '/pages/index/index',
      imageUrl: '/static/share.jpg',
      type: '0'
    };
  }
};
</script>

<style>
page {
  height: 100%;
}

.help-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.nav-header {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  background-color: #ffffff;
  flex-shrink: 0;
}

.title {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}

.search-icon {
  width: 20px;
  height: 20px;
  color: #666666;
}

.content-area {
  flex: 1;
  overflow: auto;
  padding: 32rpx;
}

.help-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.card-icon {
  width: 24px;
  height: 24px;
  margin-right: 16rpx;
  color: #3a7bfd;
}

.card-title {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}

.help-items {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.help-item {
  display: flex;
  align-items: flex-start;
}

.item-icon {
  width: 20px;
  height: 20px;
  margin-right: 16rpx;
  margin-top: 4rpx;
  color: #3a7bfd;
}

.item-text {
  font-size: 14px;
  color: #666666;
  line-height: 1.5;
  flex: 1;
}

.feedback-title {
  font-size: 14px;
  color: #333333;
  text-align: center;
  margin-bottom: 24rpx;
  display: block;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 24rpx;
  margin-bottom: 24rpx;
}

.feedback-btn {
  width: 200rpx;
  height: 72rpx;
  border-radius: 36rpx;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.solved {
  background-color: #3a7bfd;
  color: #ffffff;
}

.unsolved {
  background-color: #f5f7fa;
  color: #666666;
}

.contact-service {
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-text {
  font-size: 14px;
  color: #999999;
}

.service-link {
  font-size: 14px;
  color: #3a7bfd;
  margin-left: 8rpx;
}
</style>